<template>
  <!-- 电压/电流曲线 -->
  <div class="chartContent">
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
      class="chartForm"
    >
      <a-form-item label="" name="name">
        <a-radio-group v-model:value="chartType" @change="changeChartType">
          <a-radio-button :value="0">线电压</a-radio-button>
          <a-radio-button :value="1">相电流</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="日期" name="code">
        <a-date-picker
          v-model:value="form.date"
          placeholder="选择日期"
          class="formSelect"
          formatter="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :allowClear="false"
        />
      </a-form-item>
      <a-button
        type="primary"
        class="filterBtn"
        @click="getVoltageCurrent"
        :loading="chartLoading"
        >查询</a-button
      >
      <a-button v-hasPermission="'monitorVoltageCurrentCheckData'" type="primary" class="filterBtn yellowBtn" @click="checkData"
        >查看数据</a-button
      >
    </a-form>
    <a-spin :spinning="chartLoading">
      <div
        v-for="(chartData, index) in chartsData"
        :key="index"
        :id="`voltageCurrentChart${index}`"
        class="chartContainer"
      />
      <a-empty
        v-if="!chartsData?.length"
        style="opacity: 0.5; margin-top: 50px"
      />
    </a-spin>
  </div>

  <!-- 查看数据 -->
  <DetailsData
    :detailsDataVisible="detailsDataVisible"
    :chartsTableData="chartsTableData"
    :chartType="chartType"
    @update:detailsDataVisible="(val) => (detailsDataVisible = val)"
  />
</template>
<script setup>

import DetailsData from "./detailsData.vue"
import * as echarts from "echarts"
import { voltageOption, currentOption } from "./chartOption"
import { getCurrentDate } from "@/utils/common"
const $api = inject("$api")
import { random } from "lodash-es"

import { cloneDeep } from "lodash-es"
const props = defineProps({
  stationInfo: {
    type: Number,
  },
})
const chartLoading = ref(false)
const detailsDataVisible = ref(false)
const form = ref({
  date: null,
})
const chartTypePreFix = {
  0: "avVolt",
  1: "avAmpere",
}
const chartType = ref(0)
const chartsData = ref([
  {
    name: "功率曲线1",
    data: [],
  },
  {
    name: "功率曲线2",
    data: [],
  },
])
const chartsTableData = ref([])
const chartOptionData = ref()
const initChart = (chartData, index, lineType) => {
  // 1-AB线电压 2-BC线电压 3-CA线电压
  const powerChart = chartOptionData.value
  const xAxisData = chartData.lineData.map(
    (item) => item.dateTime.split(" ")[1]
  )
  powerChart.series[0].data = chartData.lineData.map((item) => {
    return {
      ...item,
      // value: random(0, 500) + index,
    }
  })
  powerChart.xAxis.data = xAxisData
  powerChart.title.text = `${chartData.name}`
  // 将选项应用于图表实例
  const chartEl = document.getElementById("voltageCurrentChart" + index)
  if (chartEl) {
    const chartInstance = echarts.init(chartEl)
    chartInstance.resize()
    chartInstance.clear()
    chartInstance.setOption(powerChart)
  }
}

const getLineData = async (lineType) => {
  const params = {
    stationId: props.stationInfo.id,
    lineType, // 1-AB线电压 2-BC线电压 3-CA线电压
    date: form.value.date,
  }
  const res = await $api[chartTypePreFix[chartType.value]](params)
  if (res?.data) {
    chartsTableData.value.push(res.data)
    chartsData.value.push(res.data)
    chartsData.value = chartsData.value
      .flat()
      .sort((a, b) => a.lineType - b.lineType)
  }
}
const getVoltageCurrent = async () => {
  chartsData.value = []
  chartsTableData.value = []
  chartOptionData.value = cloneDeep(
    chartType.value === 0 ? voltageOption : currentOption
  )
  if (!form.value.date) {
    message.error("请选择日期")
    return
  }
  const lineType = [1, 2, 3] // 1-AB线电压 2-BC线电压 3-CA线电压
  chartLoading.value = true
  const promises = lineType.map((types) => getLineData(types))
  await Promise.all(promises).then(() => {
    chartLoading.value = false
    chartsTableData.value
      .flat()
      .sort((a, b) => a.lineType - b.lineType) // 根据lineType排序
      .forEach((chartData, index) => {
        initChart(chartData, index, lineType)
      })
  })
}
const checkData = () => {
  detailsDataVisible.value = true
}
const changeChartType = () => {
  getVoltageCurrent()
}
onMounted(() => {})
const handleChageStation = () => {
  form.value.date = getCurrentDate()
  getVoltageCurrent()
}
defineExpose({ handleChageStation })
</script>

<style lang="less" scoped>
.chartForm {
  margin-top: 20px;
}
.ant-form-item {
  margin-bottom: 20px;
}
.chartContainer {
  margin-bottom: 20px;
  width: 100%;
  height: 300px;
  background: #141414;
  border-radius: 4px;
}
.filterBtn {
  margin-right: 20px;
}
</style>
